<template>
  <div class="hello">
    <h1>LaTeX 公式渲染示例</h1>
    <div v-katex>
      $$ e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} $$

      $$ \text{均值} (\bar{x}) = \frac{1}{N}\sum_{i=1}^{N} x_i $$

      $$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $$

      $$
      \text{均值} (\bar{x}) = \frac{1}{N}\sum_{i=1}^{N} x_i
      $$

      $$
      \text{中位数} = \begin{cases}
      x_{(n+1)/2}, & \text{当 }n \text{是奇数} \\
      \frac{x_{(n/2)} + x_{(n/2 + 1)}}{2}, & \text{当 }n \text{是偶数}
      \end{cases}
      $$

      $$
      \text{方差} (s^2) = \frac{1}{N-1}\sum_{i=1}^{N} (x_i - \bar{x})^2
      $$

      $$
      \text{标准差} (s) = \sqrt{s^2}
      $$

      $$
      \text{偏度} = \frac{1}{N}\sum_{i=1}^{N} \left(\frac{x_i - \bar{x}}{s}\right)^3
      $$

      $$
      \text{峰度} = \frac{1}{N}\sum_{i=1}^{N} \left(\frac{x_i - \bar{x}}{s}\right)^4 - 3
      $$

    </div>

    <div>
      <label for="latex-input">请输入 LaTeX 公式：</label>
      <input id="latex-input" type="text" v-model="latexFormula" placeholder="例如：\\frac{a}{b}" />
    </div>
    <div v-katex:display="latexFormula" class="katex-display"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      latexFormula: '$$ \\text{标准差} (s) = \\sqrt{s^2} $$'
    };
  }
}
</script>

<style>
.katex-display {
  margin-top: 20px;
  font-size: 1.5em;
  /* 调整公式大小 */
}
</style>